import React,{useState} from 'react';
import { Form,  Button } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import './Login.css'
import { useHistory } from 'react-router';

var flag = 0;

const Login = () => {
    const [name,setName] = useState('');
    const [psw,setPsw] = useState('');
    const history = useHistory();
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const btn = () => {
        fetch(`https://api.124ss.xyz:2355/adminlogin?rand=$11`,{
          method: "GET",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          }
    
        }).then(res => {
          return res.json();
        })
        .then(res =>{
            for(var i = 0; i < res.length; i++){
                if(name==res[i]['admin_name'] && psw==res[i]['admin_psw']){
                    flag = 1;
                    break;
                }
                else{
                    flag = 0;
                }
            }
            if(flag == 1){
                history.push('/home');
            }
            else{
                alert('用户名或密码错误')
            }
        } )
        .catch((err)=>{
          console.log("err:",err);
        })
    }

    return (
        <div className='container'>
            <div className='icon'>
                <UserOutlined />
            </div>
            <Form name="basic" 
                labelCol={{span: 8,}} 
                wrapperCol={{span: 16,}}
                initialValues={{remember: true,}}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item name="Username">
                    <div className="inp">
                        <input style={{width: '300px',color: 'white'}} placeholder='用户名' 
                         value = {name}
                         onChange = {e => {setName(e.target.value)}}
                        />
                    </div>
                </Form.Item>

                <Form.Item name='Password'>
                    <div className='psw'>
                        <input style={{width: '300px',color: 'white'}} placeholder="密码" type="password" 
                         value = {psw} 
                         onChange = {e => {setPsw(e.target.value)}}
                        />
                    </div>
                </Form.Item>

                <Form.Item wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                >
                    <div className='btn'>
                        <Button type="primary" htmlType="submit" onClick={btn}>
                            登录
                        </Button>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
}

export default Login;

